<!--
    @name 质量活动维护-详情
    @author wangjuan
-->
<template>
  <section>
    <el-dialog
      v-dialogDrag
      :title="textMap"
      :visible="popupsVisible"
      width="70%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="close"
      @opened="openDialog"
    >
      <dialogHeader
        slot="title"
        :title="textMap"
        :style-type="$store.state.app.dialogType"
      />
      <div class="filter-container filter-title">活动信息</div>
      <div class="filter-container filter-params">
        <el-row id="elrow" ref="vailComponentList" :gutter="24">
          <component
            :is="comp.component"
            v-for="comp in tableComponents.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :date-type="comp.dateType"
            :disabled="true"
            :is-require="comp.isRequire"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div class="eltabs">
        <el-tabs v-model="activeName">
          <el-tab-pane label="质量活动车辆" name="first">
            <qualityActivityCar ref="carTable" :data-for-form="dataForForm" />
          </el-tab-pane>

          <el-tab-pane label="工时" name="second">
            <workingHours ref="timeTable" />
          </el-tab-pane>

          <el-tab-pane label="备件" name="third">
            <sparePart ref="spartTable" />
          </el-tab-pane>

          <el-tab-pane label="其他项目" name="fourth">
            <otherProjection ref="otherTable" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import api from '@/api/se/serviceActivities'

export default {
  name: 'QualityActivityQuery',
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader'),
    qualityActivityCar: () => import('./qualityActivityCar.vue'),
    workingHours: () => import('./workingHours.vue'),
    sparePart: () => import('./sparePart.vue'),
    otherProjection: () => import('./otherProjection.vue')

  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    dynamicEditRowData: { type: Object, default: function() { return {} } }
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      activeName: 'first',
      dataForForm: {},
      textMap: '质量活动详情',

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '活动编号：',
              codeField: 'activityCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey2',
              labelName: '活动类别：',
              codeField: 'category',
              oFields: 'category,categoryName',
              component: () => import('@/components/org/LookupValue'),
              options: [
                { category: '1', categoryName: '召回' },
                { category: '2', categoryName: '市场质量活动' }
              ],
              type: 'dropdownList',
              isRequire: true,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey3',
              labelName: '类型：',
              codeField: 'type',
              component: () => import('@/components/org/LookupValue'),
              oFields: 'type,typeName',
              options: [
                { type: '1', typeName: '主动活动' },
                { type: '2', typeName: '被动活动' }
              ],
              type: 'dropdownList',
              isRequire: true,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey4',
              labelName: '活动主题：',
              codeField: 'theme',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey5',
              labelName: '车系：',
              codeField: 'carSeriesCn',
              component: () => import('@/components/org/commonSelect'),
              customObj: {
                api: api.queryCarSeries,
                selectType: '1',
                defOptionFields: ['carSeriesCode', 'carSeriesCn']
              },
              type: 'dropdownList',
              isRequire: true,
              isMust: true
            },
            {
              compKey: 'compKey6',
              labelName: '故障部位：',
              codeField: 'faultPartName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isRequire: true,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey7',
              labelName: '故障现象码：',
              codeField: 'csCtName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isRequire: true,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey8',
              labelName: '主损件编码：',
              codeField: 'pfpCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isRequire: true,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey9',
              labelName: '通知方式：',
              codeField: 'notify',
              component: () => import('@/components/org/LookupValue'),
              oFields: 'notify,notifyName',
              options: [
                { notify: '1', notifyName: '自然回店检修' },
                { notify: '2', notifyName: '主动邀约客户' }
              ],
              type: 'dropdownList',
              isRequire: true,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey19',
              labelName: '活动开始日期：',
              codeField: 'enableDate',
              component: () => import('@/components/org/datePicker/datePicker'),
              type: 'daterange',
              isMust: true
            },
            {
              compKey: 'compKey20',
              labelName: '活动截止日期：',
              codeField: 'closeDate',
              component: () => import('@/components/org/datePicker/datePicker'),
              type: 'daterange',
              isMust: true
            }
          ],

      formField: this.$utils.getFormField(this, {
        activityCode: '',
        category: '',
        type: '',
        theme: '',
        carSeriesCode: '',
        faultPartCode: '',
        csCtCode: '',
        pfpCode: '', // 主损件
        notify: '',
        enableDate: '',
        closeDate: '',
        carList: [],
        wiList: [],
        partList: [],
        otherList: []
      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])
    }
  },

  methods: {
    openDialog() {
      this.dataForForm = this.dynamicEditRowData
      this.$requestAPI({
        apiUrl: api.queryQualityActivityInfo.APIUrl,
        variables: {
          activityCode: this.dynamicEditRowData.activityCode,
          activityId: this.dynamicEditRowData.activityId
        }
      }).then(res => {
        if (res.result === '1') {
          this.formField = res.rows
          this.$refs.carTable.$refs.multipleTable.list = res.rows.carList
          this.$refs.timeTable.$refs.multipleTable.list = res.rows.wiList
          this.$refs.spartTable.$refs.multipleTable.list = res.rows.partList
          this.$refs.otherTable.$refs.multipleTable.list = res.rows.otherList
        }
      })
    },

    close() {
      this.$emit('closeviewData')
      // this.$refs.carTable.$refs.formField = ''
    }
  }
}
</script>

<style lang="scss" scoped>

/deep/.filter-params .el-col {
  margin-bottom: 15px;
}

#elrow {
  margin-right: 0 !important;

}
</style>
